<template>
  <div class="resources-page">
    <h1 class="page-title">
      <el-icon><FolderOpened /></el-icon>
      学习资源
    </h1>

    <!-- 搜索和筛选 -->
    <el-card class="search-card mb-20">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="16">
          <el-input
            v-model="searchQuery"
            placeholder="搜索资源名称、描述或关键词..."
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :xs="24" :sm="8">
          <el-select v-model="selectedCategory" placeholder="选择分类" clearable @change="handleCategoryChange">
            <el-option
              v-for="category in categories"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <!-- 资源分类标签 -->
    <div class="category-tabs mb-20">
      <el-tag
        v-for="category in categories"
        :key="category.value"
        :type="selectedCategory === category.value ? 'primary' : 'info'"
        class="category-tag"
        @click="selectedCategory = category.value"
      >
        <el-icon class="tag-icon"><component :is="category.icon" /></el-icon>
        {{ category.label }}
      </el-tag>
      <el-tag
        :type="selectedCategory === '' ? 'primary' : 'info'"
        class="category-tag"
        @click="selectedCategory = ''"
      >
        <el-icon class="tag-icon"><Grid /></el-icon>
        全部
      </el-tag>
    </div>

    <!-- 资源列表 -->
    <div class="resources-grid">
      <div
        v-for="resource in filteredResources"
        :key="resource.id"
        class="resource-card"
      >
        <el-card :body-style="{ padding: '0px' }" class="resource-item">
          <!-- 资源图片/图标 -->
          <div class="resource-image">
            <img v-if="resource.image" :src="resource.image" :alt="resource.title" />
            <div v-else class="resource-placeholder">
              <el-icon class="placeholder-icon"><component :is="getCategoryIcon(resource.category)" /></el-icon>
            </div>
            <div class="resource-overlay">
              <el-button-group>
                <el-button type="primary" size="small" @click="openResource(resource)">
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button 
                  :type="resource.favorited ? 'danger' : 'default'" 
                  size="small" 
                  @click="toggleFavorite(resource)"
                >
                  <el-icon><Star /></el-icon>
                </el-button>
              </el-button-group>
            </div>
          </div>
          
          <!-- 资源信息 -->
          <div class="resource-content">
            <div class="resource-header">
              <h3 class="resource-title">{{ resource.title }}</h3>
              <el-tag :type="getCategoryType(resource.category)" size="small">
                {{ getCategoryLabel(resource.category) }}
              </el-tag>
            </div>
            
            <p class="resource-description">{{ resource.description }}</p>
            
            <div class="resource-meta">
              <div class="resource-stats">
                <span class="stat-item">
                  <el-icon><User /></el-icon>
                  {{ resource.author }}
                </span>
                <span class="stat-item">
                  <el-icon><Clock /></el-icon>
                  {{ resource.duration }}
                </span>
                <span class="stat-item">
                  <el-icon><Star /></el-icon>
                  {{ resource.rating }}
                </span>
              </div>
              
              <div class="resource-actions">
                <el-button size="small" @click="openResource(resource)">
                  访问资源
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="filteredResources.length === 0" class="empty-state">
      <el-empty description="没有找到相关资源">
        <el-button type="primary" @click="clearFilters">清除筛选条件</el-button>
      </el-empty>
    </div>

    <!-- 推荐资源 -->
    <el-card class="recommended-section" v-if="recommendedResources.length > 0">
      <template #header>
        <div class="card-header">
          <el-icon><Star /></el-icon>
          <span>推荐资源</span>
        </div>
      </template>
      
      <el-carousel height="200px" indicator-position="outside">
        <el-carousel-item v-for="resource in recommendedResources" :key="resource.id">
          <div class="carousel-item" @click="openResource(resource)">
            <div class="carousel-content">
              <h3>{{ resource.title }}</h3>
              <p>{{ resource.description }}</p>
              <el-tag :type="getCategoryType(resource.category)">
                {{ getCategoryLabel(resource.category) }}
              </el-tag>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>

    <!-- 资源详情弹窗 -->
    <el-dialog
      v-model="showResourceDialog"
      :title="currentResource?.title"
      width="800px"
      class="resource-dialog"
    >
      <div v-if="currentResource" class="resource-detail">
        <div class="detail-header">
          <div class="detail-image">
            <img v-if="currentResource.image" :src="currentResource.image" :alt="currentResource.title" />
            <div v-else class="detail-placeholder">
              <el-icon class="placeholder-icon"><component :is="getCategoryIcon(currentResource.category)" /></el-icon>
            </div>
          </div>
          <div class="detail-info">
            <h2>{{ currentResource.title }}</h2>
            <p class="detail-description">{{ currentResource.description }}</p>
            <div class="detail-meta">
              <el-tag :type="getCategoryType(currentResource.category)">
                {{ getCategoryLabel(currentResource.category) }}
              </el-tag>
              <span>作者：{{ currentResource.author }}</span>
              <span>时长：{{ currentResource.duration }}</span>
              <span>评分：{{ currentResource.rating }}</span>
            </div>
          </div>
        </div>
        
        <div class="detail-content" v-if="currentResource.content">
          <h3>详细内容</h3>
          <div v-html="currentResource.content"></div>
        </div>
        
        <div class="detail-features" v-if="currentResource.features">
          <h3>主要特点</h3>
          <ul>
            <li v-for="feature in currentResource.features" :key="feature">{{ feature }}</li>
          </ul>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showResourceDialog = false">关闭</el-button>
          <el-button 
            :type="currentResource?.favorited ? 'danger' : 'default'" 
            @click="toggleFavorite(currentResource)"
          >
            <el-icon><Star /></el-icon>
            {{ currentResource?.favorited ? '取消收藏' : '收藏' }}
          </el-button>
          <el-button type="primary" @click="openResourceLink(currentResource?.url)">
            <el-icon><Link /></el-icon>
            访问资源
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 状态数据
const searchQuery = ref('')
const selectedCategory = ref('')
const showResourceDialog = ref(false)
const currentResource = ref(null)

// 资源分类
const categories = ref([
  { label: 'HTML/CSS', value: 'html-css', icon: 'Document' },
  { label: 'JavaScript', value: 'javascript', icon: 'Lightning' },
  { label: 'C#', value: 'csharp', icon: 'Cpu' },
  { label: 'Vue.js', value: 'vue', icon: 'Grid' },
  { label: '工具软件', value: 'tools', icon: 'Tools' },
  { label: '视频教程', value: 'videos', icon: 'VideoPlay' },
  { label: '电子书籍', value: 'books', icon: 'Reading' },
  { label: '在线课程', value: 'courses', icon: 'School' }
])

// 资源数据
const resources = ref([
  {
    id: 1,
    title: 'MDN Web 文档',
    description: 'Mozilla 开发者网络提供的最权威的Web技术文档，包含HTML、CSS、JavaScript等详细参考资料。',
    category: 'html-css',
    author: 'Mozilla',
    duration: '无限制',
    rating: '4.9',
    url: 'https://developer.mozilla.org/zh-CN/',
    favorited: false,
    image: 'https://developer.mozilla.org/favicon-192x192.png',
    content: '<p>MDN Web 文档是学习Web开发的最佳资源之一，提供了详细的API文档、教程和示例。</p>',
    features: [
      '详细的API参考文档',
      '交互式示例和教程',
      '多语言支持',
      '社区贡献内容',
      '定期更新'
    ]
  },
  {
    id: 2,
    title: 'Vue.js 官方文档',
    description: 'Vue.js 官方提供的详细文档，从基础概念到高级特性都有详细说明。',
    category: 'vue',
    author: 'Vue.js 团队',
    duration: '20小时',
    rating: '4.8',
    url: 'https://cn.vuejs.org/',
    favorited: true,
    content: '<p>Vue.js 是一套用于构建用户界面的渐进式框架。</p>',
    features: [
      '渐进式框架',
      '组件化开发',
      '响应式数据绑定',
      '虚拟DOM',
      '丰富的生态系统'
    ]
  },
  {
    id: 3,
    title: 'C# 编程指南',
    description: 'Microsoft 官方的 C# 编程指南，涵盖语言基础到高级特性。',
    category: 'csharp',
    author: 'Microsoft',
    duration: '30小时',
    rating: '4.7',
    url: 'https://docs.microsoft.com/zh-cn/dotnet/csharp/',
    favorited: false,
    content: '<p>C# 是一种现代的、面向对象的编程语言。</p>',
    features: [
      '面向对象编程',
      '类型安全',
      '自动内存管理',
      '丰富的标准库',
      '跨平台支持'
    ]
  },
  {
    id: 4,
    title: 'JavaScript.info',
    description: '现代JavaScript教程，从基础到高级，内容详实且易懂。',
    category: 'javascript',
    author: 'Ilya Kantor',
    duration: '50小时',
    rating: '4.9',
    url: 'https://zh.javascript.info/',
    favorited: false,
    content: '<p>现代JavaScript教程涵盖了从基础到高级的所有知识点。</p>',
    features: [
      '从零开始学习',
      '详细的代码示例',
      '练习题和解答',
      '现代JavaScript特性',
      '浏览器和Node.js'
    ]
  },
  {
    id: 5,
    title: 'Visual Studio Code',
    description: '微软开发的免费代码编辑器，支持多种编程语言和丰富的插件生态。',
    category: 'tools',
    author: 'Microsoft',
    duration: '工具软件',
    rating: '4.8',
    url: 'https://code.visualstudio.com/',
    favorited: true,
    content: '<p>VS Code 是一款轻量级但功能强大的源代码编辑器。</p>',
    features: [
      '智能代码补全',
      '内置Git集成',
      '丰富的插件市场',
      '多平台支持',
      '调试功能'
    ]
  },
  {
    id: 6,
    title: 'Selenium WebDriver 文档',
    description: 'Selenium WebDriver 官方文档，学习浏览器自动化测试的最佳资源。',
    category: 'tools',
    author: 'Selenium 项目',
    duration: '15小时',
    rating: '4.6',
    url: 'https://selenium-python.readthedocs.io/',
    favorited: false,
    content: '<p>Selenium WebDriver 是一个用于自动化Web浏览器的工具。</p>',
    features: [
      '跨浏览器支持',
      '多种编程语言',
      '丰富的API',
      '社区支持',
      '开源免费'
    ]
  }
])

// 推荐资源
const recommendedResources = ref([
  {
    id: 101,
    title: '前端学习路线图',
    description: '2024年最新前端开发学习路线，从入门到精通的完整指南。',
    category: 'html-css',
    url: 'https://roadmap.sh/frontend'
  },
  {
    id: 102,
    title: 'C# 入门视频教程',
    description: '零基础学习C#编程，通过项目实战掌握核心概念。',
    category: 'csharp',
    url: 'https://www.youtube.com/watch?v=GhQdlIFylQ8'
  }
])

// 计算属性 - 过滤后的资源
const filteredResources = computed(() => {
  let filtered = resources.value

  // 按分类筛选
  if (selectedCategory.value) {
    filtered = filtered.filter(resource => resource.category === selectedCategory.value)
  }

  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(resource =>
      resource.title.toLowerCase().includes(query) ||
      resource.description.toLowerCase().includes(query) ||
      resource.author.toLowerCase().includes(query)
    )
  }

  return filtered
})

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

// 分类变化处理
const handleCategoryChange = () => {
  // 分类筛选逻辑已在计算属性中处理
}

// 清除筛选条件
const clearFilters = () => {
  searchQuery.value = ''
  selectedCategory.value = ''
}

// 获取分类图标
const getCategoryIcon = (category) => {
  const categoryData = categories.value.find(cat => cat.value === category)
  return categoryData?.icon || 'Document'
}

// 获取分类标签
const getCategoryLabel = (category) => {
  const categoryData = categories.value.find(cat => cat.value === category)
  return categoryData?.label || '其他'
}

// 获取分类类型（用于标签颜色）
const getCategoryType = (category) => {
  const typeMap = {
    'html-css': 'primary',
    'javascript': 'warning',
    'csharp': 'success',
    'vue': 'info',
    'tools': 'danger',
    'videos': 'primary',
    'books': 'warning',
    'courses': 'success'
  }
  return typeMap[category] || 'default'
}

// 打开资源
const openResource = (resource) => {
  currentResource.value = resource
  showResourceDialog.value = true
}

// 打开资源链接
const openResourceLink = (url) => {
  if (url) {
    window.open(url, '_blank')
  }
}

// 切换收藏状态
const toggleFavorite = (resource) => {
  resource.favorited = !resource.favorited
  
  if (resource.favorited) {
    ElMessage.success(`已收藏「${resource.title}」`)
  } else {
    ElMessage.info(`已取消收藏「${resource.title}」`)
  }
  
  // 保存到本地存储
  saveResourcesData()
}

// 保存资源数据
const saveResourcesData = () => {
  localStorage.setItem('resourcesData', JSON.stringify({
    resources: resources.value
  }))
}

// 加载资源数据
const loadResourcesData = () => {
  const saved = localStorage.getItem('resourcesData')
  if (saved) {
    const data = JSON.parse(saved)
    if (data.resources) {
      // 合并本地保存的收藏状态
      data.resources.forEach(savedResource => {
        const localResource = resources.value.find(r => r.id === savedResource.id)
        if (localResource) {
          localResource.favorited = savedResource.favorited
        }
      })
    }
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadResourcesData()
})
</script>

<style scoped>
.resources-page {
  padding: 0;
}

/* 通用样式类 */
.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
}

.page-title .el-icon {
  margin-right: 12px;
  color: #409eff;
  font-size: 28px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #409eff;
}

/* 搜索卡片 */
.search-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.category-tag {
  cursor: pointer;
  padding: 10px 16px !important;
  border-radius: 20px !important;
  transition: all 0.3s;
  display: inline-flex !important;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent !important;
  user-select: none;
  height: auto !important;
  line-height: 1.2 !important;
}

.category-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.category-tag .tag-icon {
  margin-right: 6px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

/* 修复Element Plus标签的默认样式 */
.category-tag.el-tag {
  background: #f4f4f5 !important;
  color: #606266 !important;
  border-color: #dcdfe6 !important;
}

.category-tag.el-tag--primary {
  background: linear-gradient(135deg, #409eff 0%, #36a2ff 100%) !important;
  color: white !important;
  border-color: #409eff !important;
}

.category-tag.el-tag--info {
  background: #f4f4f5 !important;
  color: #606266 !important;
  border-color: #dcdfe6 !important;
}

.category-tag.el-tag--info:hover {
  background: #ecf5ff !important;
  color: #409eff !important;
  border-color: #b3d8ff !important;
}

/* 资源网格 */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.resource-card {
  height: 100%;
}

.resource-item {
  height: 100%;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
}

.resource-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* 资源图片 */
.resource-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.resource-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: white;
}

.placeholder-icon {
  font-size: 64px;
  opacity: 0.8;
}

.resource-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.resource-item:hover .resource-overlay {
  opacity: 1;
}

/* 资源内容 */
.resource-content {
  padding: 20px;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.resource-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  flex: 1;
  margin-right: 12px;
}

.resource-description {
  margin: 0 0 16px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resource-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.stat-item .el-icon {
  margin-right: 4px;
}

/* 推荐资源 */
.recommended-section {
  margin-top: 40px;
}

.carousel-item {
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 80%;
}

.carousel-content h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
}

.carousel-content p {
  margin: 0 0 16px 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 资源详情弹窗 */
.resource-dialog .detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.detail-image {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: white;
}

.detail-info {
  flex: 1;
}

.detail-info h2 {
  margin: 0 0 12px 0;
  color: #303133;
}

.detail-description {
  margin: 0 0 16px 0;
  color: #606266;
  line-height: 1.6;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.detail-meta span {
  font-size: 14px;
  color: #909399;
}

.detail-content,
.detail-features {
  margin-top: 24px;
}

.detail-content h3,
.detail-features h3 {
  margin: 0 0 12px 0;
  color: #303133;
}

.detail-features ul {
  margin: 0;
  padding-left: 20px;
}

.detail-features li {
  margin-bottom: 8px;
  color: #606266;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .resources-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .page-title .el-icon {
    font-size: 24px;
  }
  
  .resources-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .category-tabs {
    justify-content: center;
  }
  
  .resource-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .detail-header {
    flex-direction: column;
  }
  
  .detail-image {
    width: 100%;
    height: 200px;
  }
  
  .detail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .resources-page {
    padding: 0 10px;
  }
  
  .resources-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .resource-content {
    padding: 16px;
  }
  
  .carousel-content {
    width: 90%;
  }
  
  .carousel-content h3 {
    font-size: 18px;
  }
  
  .carousel-content p {
    font-size: 13px;
  }
}
</style> 